<!--
 * @Description: 
 * @Version: 2.0
 * @Author: chengxin
 * @Date: 2022-12-15 13:59:19
 * @LastEditors: chengxin
 * @LastEditTime: 2022-12-16 13:54:36
-->
<template>
<div class="body">
    <ul class="tree">
        <div class="star"></div>
        <li v-for="(item,index) in 128" :style="`--i:${index}`"></li>
    </ul>
    <div class="abbr" @click="gohome">
        <template v-for="item in words">
            <span v-for="(item1,index) in item" :class="index==0?'initial':'hidden'">{{item1}}</span>
        </template>
    </div>
    <!-- <el-button type="primary" class="btn" @click="gohome">开启</el-button> -->
</div> 
</template>

<script setup>
import { onMounted } from 'vue';
import {useRouter} from 'vue-router'
const router=useRouter()
const gohome=()=>{
    router.push('luckdraw')
}
let title= 'Linming MerryChristmas'
let words = title.split(" ");
const changeText= ()=>{
    console.log(words);
    words.map(item=>{
        let [initial, ...restLetters] = item.split("");
        console.log(initial);
    })
}
changeText()
onMounted(()=>{
})


</script>

<style lang="less" scoped>
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.body {
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: rgb(54, 66, 70);
    list-style: none;
    background: url('../assets/images/bg.png') no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    .btn{
        position: absolute;
        bottom: 8%;
        margin: auto;
    }
    .abbr {
        position: absolute;
        bottom: 8%;
        margin: auto;
        display: flex;
        color: white;
        font-size: 2em;
        font-weight: bold;
        font-family: Lato, sans-serif;
        text-decoration: none;
        span {
            text-decoration: underline white;
            transition: all 0.5s ease-in-out;

            &.hidden {
                max-width: 0;
                text-decoration: none;
                opacity: 0;
            }
        }

        

        &:hover {
            span {
            max-width: 2em;
            text-decoration: none;
            opacity: 1;

            &.initial {
                margin-left: 0.5em;
            }
            }
        }
        }
}

.tree {
    position: relative;
    width: 500px;
    height: 700px;
    display: flex;
    justify-content: center;
    li {
        list-style: none;
        position: absolute;
        top: 25px;
        width: 4px;
        background: linear-gradient(rgba(46, 204, 113, 0), rgba(46, 204, 113, .25));
        transform-origin: 50% 0;
        /* animation: swing 4s ease-in-out infinite; */
        animation: swing 4s calc(var(--i) * -13.13s) ease-in-out infinite;
        ;
        height: calc(var(--i)*4px);
        /* animation-delay:calc(var(--i)*-0.23s); */
    }
}

.chunk {
    width: 30px;
    height: 600px;
    background-color: rgb(63, 60, 60);
    z-index: 20;
    position: relative;
    top: 30px;
}

.star {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: rgb(236, 234, 167);
    z-index: 999;
    margin-bottom: 40px;
    clip-path: polygon(50% 0, 65% 40%, 100% 40%, 72% 60%,
            85% 100%, 50% 75%, 15% 100%, 28% 60%, 0 40%, 35% 40%);
}



@keyframes swing {

    0%,
    100% {
        transform: rotate(-30deg);
    }

    5%,
    45% {
        opacity: 0.25;
        z-index: 0;
    }

    0%,
    50%,
    100% {
        opacity: 1;
        z-index: 99;
    }

    50% {
        transform: rotate(30deg);
    }
}

.tree li::before {
    content: '';
    position: absolute;
    left: -1px;
    bottom: 1px;
    width: 3px;
    height: 3px;
}

li:nth-child(4n)::before {
    background-color: red;
    box-shadow: 0 0 10px 2px red;
}

li:nth-child(4n + 1)::before {
    background-color: blue;
    box-shadow: 0 0 10px 2px blue;
}

li:nth-child(4n + 2)::before {
    background-color: orange;
    box-shadow: 0 0 10px 2px orange;
}

li:nth-child(4n + 3)::before {
    background-color: cyan;
    box-shadow: 0 0 10px 2px cyan;
}
</style>
